<!--
 * @Description: 流程流转
 * @Author: wangwangwang
 * @Date: 2020-09-05 11:17:49
 * @LastEditors: wangwangwang
 * @LastEditTime: 2020-12-22 14:01:53
-->
<template>
  <section>
    <el-dialog v-dialogDrag :visible.sync="approvalVisible" width="65%" :before-close="handleClose">
      <span slot="title">流程流转</span>
      <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="showApprovalNode" tooltip-effect="dark">
        <el-table-column align="center" label="节点序号" prop="place">
          <template slot-scope="scope">
            <span>{{scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="节点名称" prop="nodeName"></el-table-column>
        <el-table-column align="center" label="处理人" prop="roadwork">
          <template slot-scope="scope">
            <span>{{scope.row.showName || '请选择处理人'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="多人审批类型" prop="roadworklInkman"></el-table-column>
        <el-table-column label="操作" align="left" width="220">
          <template slot-scope="scope">
            <el-button v-if="scope.row.check" class="bottom_text" type="text" @click="hanldeChoise(scope.row,scope.$index)">选择处理人</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" size="medium" @click="handleClose">取 消</el-button>
        <el-button class="bottom_all" size="medium" @click="handleSure">确 定</el-button>
      </span>
    </el-dialog>
    <personModel :visible='visible' :isPerson="true" :choisedDatas="choisedData" @closeModel='closeModel' @getPerson='getPerson' />
  </section>
</template>
<script>
import personModel from '@/components/ChoisePerson/personModel';
export default {
  components: {
    personModel,
  },
  props: ['approvalVisible', 'approvalNode'],
  data() {
    return {
      visible: false,
      choiseIndex: 0,
      choisedData: [],
      showApprovalNode: [],
    }
  },
  watch: {
    approvalNode(data) {
      if (data.length) {
        const copyData = JSON.parse(JSON.stringify(data));
        copyData.pop();
        copyData.shift();
        this.showApprovalNode = copyData.map(res => {
          return { ...res, check: res.approvalUserTypeId == 6 || res.approvalUserTypeId == 7 || typeof res.showName == 'undefined' ? true : false }
        });
      }
    },
  },
  methods: {
    handleClose() {
      this.$emit('handleModal', 1);
    },
    handleSure() {
      this.$emit('handleModal', 2);
    },
    hanldeChoise(data, index) {
      this.choiseIndex = index;
      this.visible = true;
      this.choisedData = data.personList;
    },
    closeModel() {
      this.visible = false;
    },
    getPerson(data) {
      this.visible = false;
      this.$emit('sendApprovePerson', data, this.choiseIndex + 1);
    },
  },
  mounted() {
  },
}
</script>
<style scoped>
</style>
